<template>
  <div class="phone">
    <van-nav-bar size="20">
      <van-icon
        name="arrow-left"
        @click="onClickLeft"
        size="20"
        slot="left"
        color="black"
      />
      <router-link slot="right" to="/login/account" color="black"
        >账号登录</router-link
      >
    </van-nav-bar>
    <div class="fonts"><span class="passfont">手机登录</span></div>
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
          v-model="phone"
          placeholder="手机号"
          maxlength="11"
          @blur="myphone"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
      </van-cell-group>
      <van-cell-group inset>
        <van-field
          v-model="sms"
          center
          clearable
          placeholder="请输入短信验证码"
        >
          <template #button>
            <van-button size="small" type="primary">获取验证码</van-button>
          </template>
        </van-field>
      </van-cell-group>
      <div>
        <div style="margin: 1.5rem 1rem;">
          <van-button block type="primary" native-type="submit">
            登录
          </van-button>
        </div>
      </div>
    </van-form>
  </div>
</template>
<script>
export default {
  data() {
    return { phone, sms: "" };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    myphone() {
      let reg = /^[1][3578]\\d{9}$/;
      if (!reg.test(sms)) {
      }
    },
    onSubmit() {
      if (!phone) {
        this.axios
          .post("/user/login", `uname=${this.uname}&upwd=${this.upwd}`)
          .then((result) => {
            console.log(1111);
            if (result.data.msg == 200) {
              console.log("登录成功");
              this.$router.push("/");
            } else {
              console.log(result.data.msg);
            }
          });
      }
    },
  },
};
</script>
<style lang="scss">
.phone {
  a {
    font-size: 1rem;
    color: black;
  }
  span {
    font-size: 1.5rem;
    font-weight: normal;
  }
  .fonts {
    margin: 1.4rem;
    .passfont {
      font-size: 1.5rem;
    }
  }
  .van-cell {
    height: 4rem;
    line-height: 3rem;
    padding-left: 1.3rem;
  }
  .acolor {
    margin-left: 1rem;
    color: red;
  }
  .van-button--small {
    height: 2.8rem;
    padding: 0 10px;
  }
  span {
    font-size: 1.2rem;
  }
}
</style>
